<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquicktableview.cpp -->
  <title>TableView QML 类型 | Qt Quick 5.12.3</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.12</a></td><td ><a href="qtquick-index.html">Qt Quick 模块</a></td><td ><a href="qtquick-qmlmodule.html">QML类型</a></td><td >TableView QML 类型</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.3 参考指南</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">目录</a></h3>
<ul>
<li class="level1"><a href="#properties">属性</a></li>
<li class="level1"><a href="#attached-properties">Attached Properties</a></li>
<li class="level1"><a href="#attached-signals">Attached Signals</a></li>
<li class="level1"><a href="#methods">Methods</a></li>
<li class="level1"><a href="#details">详细信息</a></li>
<li class="level2"><a href="#example-usage">示例用法</a></li>
<li class="level2"><a href="#reusing-items">Reusing items</a></li>
<li class="level2"><a href="#row-heights-and-column-widths">Row heights and column widths</a></li>
<li class="level2"><a href="#overlays-and-underlays">Overlays and underlays</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">TableView QML 类型</h1>
<span class="subtitle"></span>
<!-- $$$TableView-brief -->
<p>Provides a table view of items provided by the model. <a href="#details">更多...</a></p>
<!-- @@@TableView -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> 导入语句：</td><td class="memItemRight bottomAlign"> import QtQuick 2.12</td></tr><tr><td class="memItemLeft rightAlign topAlign">继承自：</td><td class="memItemRight bottomAlign"> <p><a href="qml-qtquick-flickable.html">Flickable</a></p>
</td></tr></table></div><ul>
<li><a href="qml-qtquick-tableview-members.html">所有成员的列表，包括继承成员</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">属性</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#columnSpacing-prop">columnSpacing</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#columnWidthProvider-prop">columnWidthProvider</a></b></b> : var</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#columns-prop">columns</a></b></b> : int</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#contentHeight-prop">contentHeight</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#contentWidth-prop">contentWidth</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#delegate-prop">delegate</a></b></b> : Component</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#model-prop">model</a></b></b> : model</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#reuseItems-prop">reuseItems</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#rowHeightProvider-prop">rowHeightProvider</a></b></b> : var</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#rowSpacing-prop">rowSpacing</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#rows-prop">rows</a></b></b> : int</li>
</ul>
<a name="attached-properties"></a>
<h2 id="attached-properties">Attached Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#view-attached-prop">view</a></b></b> : TableView</li>
</ul>
<a name="attached-signals"></a>
<h2 id="attached-signals">Attached Signals</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#pooled-signal">pooled</a></b></b>()</li>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#reused-signal">reused</a></b></b>()</li>
</ul>
<a name="methods"></a>
<h2 id="methods">Methods</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-tableview.html#forceLayout-method">forceLayout</a></b></b>()</li>
</ul>
<!-- $$$TableView-description -->
<a name="details"></a>
<h2 id="details">详细信息</h2>
<p>A <a href="qml-qtquick-tableview.html">TableView</a> has a <a href="qml-qtquick-tableview.html#model-prop">model</a> that defines the data to be displayed, and a <a href="qml-qtquick-tableview.html#delegate-prop">delegate</a> that defines how the data should be displayed.</p>
<p><a href="qml-qtquick-tableview.html">TableView</a> inherits <a href="qml-qtquick-flickable.html">Flickable</a>. This means that while the model can have any number of rows and columns, only a subsection of the table is usually visible inside the viewport. As soon as you flick, new rows and columns enter the viewport, while old ones exit and are removed from the viewport. The rows and columns that move out are reused for building the rows and columns that move into the viewport. As such, the <a href="qml-qtquick-tableview.html">TableView</a> support models of any size without affecting performance.</p>
<p>A <a href="qml-qtquick-tableview.html">TableView</a> displays data from models created from built-in QML types such as <a href="../qtqml/qml-qtqml-models-listmodel.html">ListModel</a> and <a href="../qtxmlpatterns/qml-qtquick-xmllistmodel-xmllistmodel.html">XmlListModel</a>, which populates the first column only in a <a href="qml-qtquick-tableview.html">TableView</a>. To create models with multiple columns, create a model in C++ that inherits <a href="../qtcore/qabstractitemmodel.html">QAbstractItemModel</a>, and expose it to QML.</p>
<a name="example-usage"></a>
<h2 id="example-usage">示例用法</h2>
<p>The following example shows how to create a model from C++ with multiple columns:</p>
<pre class="cpp">

  <span class="preprocessor">#include &lt;QGuiApplication&gt;</span>
  <span class="preprocessor">#include &lt;QQmlApplicationEngine&gt;</span>
  <span class="preprocessor">#include &lt;QAbstractTableModel&gt;</span>

  <span class="keyword">class</span> TableModel : <span class="keyword">public</span> <span class="type">QAbstractTableModel</span>
  {
      Q_OBJECT

  <span class="keyword">public</span>:

      <span class="type"><a href="../qtqml/qml-int.html">int</a></span> rowCount(<span class="keyword">const</span> <span class="type">QModelIndex</span> <span class="operator">&amp;</span> <span class="operator">=</span> <span class="type">QModelIndex</span>()) <span class="keyword">const</span> override
      {
          <span class="keyword">return</span> <span class="number">200</span>;
      }

      <span class="type"><a href="../qtqml/qml-int.html">int</a></span> columnCount(<span class="keyword">const</span> <span class="type">QModelIndex</span> <span class="operator">&amp;</span> <span class="operator">=</span> <span class="type">QModelIndex</span>()) <span class="keyword">const</span> override
      {
          <span class="keyword">return</span> <span class="number">200</span>;
      }

      <span class="type">QVariant</span> data(<span class="keyword">const</span> <span class="type">QModelIndex</span> <span class="operator">&amp;</span>index<span class="operator">,</span> <span class="type"><a href="../qtqml/qml-int.html">int</a></span> role) <span class="keyword">const</span> override
      {
          <span class="keyword">switch</span> (role) {
              <span class="keyword">case</span> <span class="type"><a href="../qtqml/qml-qtqml-qt.html">Qt</a></span><span class="operator">::</span>DisplayRole:
                  <span class="keyword">return</span> <span class="type">QString</span>(<span class="string">&quot;%1, %2&quot;</span>)<span class="operator">.</span>arg(index<span class="operator">.</span>column())<span class="operator">.</span>arg(index<span class="operator">.</span>row());
              <span class="keyword">default</span>:
                  <span class="keyword">break</span>;
          }

          <span class="keyword">return</span> <span class="type">QVariant</span>();
      }

      <span class="type">QHash</span><span class="operator">&lt;</span><span class="type"><a href="../qtqml/qml-int.html">int</a></span><span class="operator">,</span> <span class="type">QByteArray</span><span class="operator">&gt;</span> roleNames() <span class="keyword">const</span> override
      {
          <span class="keyword">return</span> { {<span class="type"><a href="../qtqml/qml-qtqml-qt.html">Qt</a></span><span class="operator">::</span>DisplayRole<span class="operator">,</span> <span class="string">&quot;display&quot;</span>} };
      }
  };

  <span class="type"><a href="../qtqml/qml-int.html">int</a></span> main(<span class="type"><a href="../qtqml/qml-int.html">int</a></span> argc<span class="operator">,</span> <span class="type">char</span> <span class="operator">*</span>argv<span class="operator">[</span><span class="operator">]</span>)
  {
      <span class="type">QGuiApplication</span> app(argc<span class="operator">,</span> argv);

      qmlRegisterType<span class="operator">&lt;</span>TableModel<span class="operator">&gt;</span>(<span class="string">&quot;TableModel&quot;</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="string">&quot;TableModel&quot;</span>);

      <span class="type">QQmlApplicationEngine</span> engine;
      engine<span class="operator">.</span>load(<span class="type">QUrl</span>(<span class="type">QStringLiteral</span>(<span class="string">&quot;qrc:/main.qml&quot;</span>)));

      <span class="keyword">return</span> app<span class="operator">.</span>exec();
  }

  <span class="preprocessor">#include &quot;main.moc&quot;</span>

</pre>
<p>And then how to use it from QML:</p>
<pre class="qml">

  import QtQuick 2.12
  import TableModel 0.1

  <span class="type"><a href="qml-qtquick-tableview.html">TableView</a></span> {
      <span class="name">anchors</span>.fill: <span class="name">parent</span>
      <span class="name">columnSpacing</span>: <span class="number">1</span>
      <span class="name">rowSpacing</span>: <span class="number">1</span>
      <span class="name">clip</span>: <span class="number">true</span>

      <span class="name">model</span>: <span class="name">TableModel</span> {}

      <span class="name">delegate</span>: <span class="name">Rectangle</span> {
          <span class="name">implicitWidth</span>: <span class="number">100</span>
          <span class="name">implicitHeight</span>: <span class="number">50</span>
          <span class="type"><a href="qml-qtquick-text.html">Text</a></span> {
              <span class="name">text</span>: <span class="name">display</span>
          }
      }
  }

</pre>
<a name="reusing-items"></a>
<h2 id="reusing-items">Reusing items</h2>
<p><a href="qml-qtquick-tableview.html">TableView</a> recycles delegate items by default, instead of instantiating from the <a href="qml-qtquick-tableview.html#delegate-prop">delegate</a> whenever new rows and columns are flicked into view. This can give a huge performance boost, depending on the complexity of the delegate.</p>
<p>When an item is flicked out, it moves to the <i>reuse pool</i>, which is an internal cache of unused items. When this happens, the <a href="qml-qtquick-tableview.html#pooled-signal">TableView::pooled</a> signal is emitted to inform the item about it. Likewise, when the item is moved back from the pool, the <a href="qml-qtquick-tableview.html#reused-signal">TableView::reused</a> signal is emitted.</p>
<p>Any item properties that come from the model are updated when the item is reused. This includes <code>index</code>, <code>row</code>, and <code>column</code>, but also any model roles.</p>
<p><b>Note: </b>Avoid storing any state inside a delegate. If you do, reset it manually on receiving the <a href="qml-qtquick-tableview.html#reused-signal">TableView::reused</a> signal.</p><p>If an item has timers or animations, consider pausing them on receiving the <a href="qml-qtquick-tableview.html#pooled-signal">TableView::pooled</a> signal. That way you avoid using the CPU resources for items that are not visible. Likewise, if an item has resources that cannot be reused, they could be freed up.</p>
<p>If you don't want to reuse items or if the <a href="qml-qtquick-tableview.html#delegate-prop">delegate</a> cannot support it, you can set the <a href="qml-qtquick-tableview.html#reuseItems-prop">reuseItems</a> property to <code>false</code>.</p>
<p><b>Note: </b>While an item is in the pool, it might still be alive and respond to connected signals and bindings.</p><p>The following example shows a delegate that animates a spinning rectangle. When it is pooled, the animation is temporarily paused:</p>
<pre class="qml">

  <span class="type"><a href="../qtqml/qml-qtqml-component.html">Component</a></span> {
      <span class="name">id</span>: <span class="name">tableViewDelegate</span>
      <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
          <span class="name">implicitWidth</span>: <span class="number">100</span>
          <span class="name">implicitHeight</span>: <span class="number">50</span>

          <span class="name">TableView</span>.onPooled: <span class="name">rotationAnimation</span>.<span class="name">pause</span>()
          <span class="name">TableView</span>.onReused: <span class="name">rotationAnimation</span>.<span class="name">resume</span>()

          <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
              <span class="name">id</span>: <span class="name">rect</span>
              <span class="name">anchors</span>.centerIn: <span class="name">parent</span>
              <span class="name">width</span>: <span class="number">40</span>
              <span class="name">height</span>: <span class="number">5</span>
              <span class="name">color</span>: <span class="string">&quot;green&quot;</span>

              <span class="type"><a href="qml-qtquick-rotationanimation.html">RotationAnimation</a></span> {
                  <span class="name">id</span>: <span class="name">rotationAnimation</span>
                  <span class="name">target</span>: <span class="name">rect</span>
                  <span class="name">duration</span>: (<span class="name">Math</span>.<span class="name">random</span>() <span class="operator">*</span> <span class="number">2000</span>) <span class="operator">+</span> <span class="number">200</span>
                  <span class="name">from</span>: <span class="number">0</span>
                  <span class="name">to</span>: <span class="number">359</span>
                  <span class="name">running</span>: <span class="number">true</span>
                  <span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span>
              }
          }
      }
  }

</pre>
<a name="row-heights-and-column-widths"></a>
<h2 id="row-heights-and-column-widths">Row heights and column widths</h2>
<p>When a new column is flicked into view, <a href="qml-qtquick-tableview.html">TableView</a> will determine its width by calling the <a href="qml-qtquick-tableview.html#columnWidthProvider-prop">columnWidthProvider</a> function. <a href="qml-qtquick-tableview.html">TableView</a> itself will never store row height or column width, as it's designed to support large models containing any number of rows and columns. Instead, it will ask the application whenever it needs to know.</p>
<p><a href="qml-qtquick-tableview.html">TableView</a> uses the largest <code>implicitWidth</code> among the items as the column width, unless the <a href="qml-qtquick-tableview.html#columnWidthProvider-prop">columnWidthProvider</a> property is explicitly set. Once the column width is found, all other items in the same column are resized to this width, even if new items that are flicked in later have larger <code>implicitWidth</code>. Setting an explicit <code>width</code> on an item is ignored and overwritten.</p>
<p><b>Note: </b>The calculated width of a column is discarded when it is flicked out of the viewport, and is recalculated if the column is flicked back in. The calculation is always based on the items that are visible when the column is flicked in. This means that it can end up different each time, depending on which row you're at when the column enters. You should therefore have the same <code>implicitWidth</code> for all items in a column, or set <a href="qml-qtquick-tableview.html#columnWidthProvider-prop">columnWidthProvider</a>. The same logic applies for the row height calculation.</p><p>If you change the values that a <a href="qml-qtquick-tableview.html#rowHeightProvider-prop">rowHeightProvider</a> or a <a href="qml-qtquick-tableview.html#columnWidthProvider-prop">columnWidthProvider</a> return for rows and columns inside the viewport, you must call <a href="qml-qtquick-tableview.html#forceLayout-method">forceLayout</a>. This informs <a href="qml-qtquick-tableview.html">TableView</a> that it needs to use the provider functions again to recalculate and update the layout.</p>
<p><b>Note: </b>The size of a row or column should be a whole number to avoid sub-pixel alignment of items.</p><p>The following example shows how to set a simple <code>columnWidthProvider</code> together with a timer that modifies the values the function returns. When the array is modified, <a href="qml-qtquick-tableview.html#forceLayout-method">forceLayout</a> is called to let the changes take effect:</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-tableview.html">TableView</a></span> {
      <span class="name">id</span>: <span class="name">tableView</span>

      property <span class="type"><a href="../qtqml/qml-var.html">var</a></span> <span class="name">columnWidths</span>: [<span class="number">100</span>, <span class="number">50</span>, <span class="number">80</span>, <span class="number">150</span>]
      <span class="name">columnWidthProvider</span>: <span class="keyword">function</span> (column) { <span class="keyword">return</span> <span class="name">columnWidths</span>[<span class="name">column</span>] }

      <span class="type"><a href="../qtqml/qml-qtqml-timer.html">Timer</a></span> {
          <span class="name">running</span>: <span class="number">true</span>
          <span class="name">interval</span>: <span class="number">2000</span>
          <span class="name">onTriggered</span>: {
              <span class="name">tableView</span>.<span class="name">columnWidths</span>[<span class="number">2</span>] <span class="operator">=</span> <span class="number">150</span>
              <span class="name">tableView</span>.<span class="name">forceLayout</span>();
          }
      }
  }

</pre>
<a name="overlays-and-underlays"></a>
<h2 id="overlays-and-underlays">Overlays and underlays</h2>
<p>Tableview inherits <a href="qml-qtquick-flickable.html">Flickable</a>. And when new items are instantiated from the delegate, it will parent them to the <a href="qml-qtquick-flickable.html#contentItem-prop">contentItem</a> with a <code>z</code> value equal to <code>1</code>. You can add your own items inside the Tableview, as child items of the Flickable. By controlling their <code>z</code> value, you can make them be on top of or underneath the table items.</p>
<p>Here is an example that shows how to add some text on top of the table, that moves together with the table as you flick:</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-tableview.html">TableView</a></span> {
      <span class="name">id</span>: <span class="name">tableView</span>

      <span class="name">topMargin</span>: <span class="name">header</span>.<span class="name">implicitHeight</span>

      <span class="type"><a href="qml-qtquick-text.html">Text</a></span> {
          <span class="name">id</span>: <span class="name">header</span>
          <span class="name">text</span>: <span class="string">&quot;A table header&quot;</span>
      }
  }

</pre>
<!-- @@@TableView -->
<h2>属性文档</h2>
<!-- $$$columnSpacing -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="columnSpacing-prop">
<td class="tblQmlPropNode"><p>
<a name="columnSpacing-prop"></a><span class="name">columnSpacing</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the spacing between the columns.</p>
<p>The default value is 0.</p>
</div></div><!-- @@@columnSpacing -->
<br/>
<!-- $$$columnWidthProvider -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="columnWidthProvider-prop">
<td class="tblQmlPropNode"><p>
<a name="columnWidthProvider-prop"></a><span class="name">columnWidthProvider</span> : <span class="type"><a href="../qtqml/qml-var.html">var</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property can hold a function that returns the column width for each column in the model. When assigned, it is called whenever <a href="qml-qtquick-tableview.html">TableView</a> needs to know the width of a specific column. The function takes one argument, <code>column</code>, for which the <a href="qml-qtquick-tableview.html">TableView</a> needs to know the width.</p>
<p><b>Note: </b>The width of a column must always be greater than <code>0</code>.</p><p><b>See also </b><a href="qml-qtquick-tableview.html#rowHeightProvider-prop">rowHeightProvider</a> and <a href="qml-qtquick-tableview.html#row-heights-and-column-widths">Row heights and column widths</a>.</p>
</div></div><!-- @@@columnWidthProvider -->
<br/>
<!-- $$$columns -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="columns-prop">
<td class="tblQmlPropNode"><p>
<a name="columns-prop"></a><span class="name">columns</span> : <span class="type"><a href="../qtqml/qml-int.html">int</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the number of columns in the table. This is equal to the number of columns in the model. If the model is a list, columns will be 1.</p>
<p>This property is read only.</p>
</div></div><!-- @@@columns -->
<br/>
<!-- $$$contentHeight -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="contentHeight-prop">
<td class="tblQmlPropNode"><p>
<a name="contentHeight-prop"></a><span class="name">contentHeight</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the height of the <a href="qml-qtquick-tableview.html#view-attached-prop">view</a>, which is also the height of the table (including margins). As a <a href="qml-qtquick-tableview.html">TableView</a> cannot always know the exact height of the table without loading all rows in the model, the <code>contentHeight</code> is usually an estimated height based on the rows it has seen so far. This estimate is recalculated whenever new rows are flicked into view, which means that the content height can change dynamically.</p>
<p>If you know up front what the height of the table will be, assign a value to <code>contentHeight</code> explicitly, to avoid unnecessary calculations and updates to the <a href="qml-qtquick-tableview.html">TableView</a>.</p>
<p><b>请参考 </b><a href="qml-qtquick-tableview.html#contentWidth-prop">contentWidth</a>。</p>
</div></div><!-- @@@contentHeight -->
<br/>
<!-- $$$contentWidth -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="contentWidth-prop">
<td class="tblQmlPropNode"><p>
<a name="contentWidth-prop"></a><span class="name">contentWidth</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the width of the <a href="qml-qtquick-tableview.html#view-attached-prop">view</a>, which is also the width of the table (including margins). As a <a href="qml-qtquick-tableview.html">TableView</a> cannot always know the exact width of the table without loading all columns in the model, the <code>contentWidth</code> is usually an estimated width based on the columns it has seen so far. This estimate is recalculated whenever new columns are flicked into view, which means that the content width can change dynamically.</p>
<p>If you know up front what the width of the table will be, assign a value to <code>contentWidth</code> explicitly, to avoid unnecessary calculations and updates to the <a href="qml-qtquick-tableview.html">TableView</a>.</p>
<p><b>请参考 </b><a href="qml-qtquick-tableview.html#contentHeight-prop">contentHeight</a>。</p>
</div></div><!-- @@@contentWidth -->
<br/>
<!-- $$$delegate -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="delegate-prop">
<td class="tblQmlPropNode"><p>
<a name="delegate-prop"></a><span class="name">delegate</span> : <span class="type"><a href="../qtqml/qml-qtqml-component.html">Component</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>The delegate provides a template defining each cell item instantiated by the view. The model index is exposed as an accessible <code>index</code> property. The same applies to <code>row</code> and <code>column</code>. Properties of the model are also available depending upon the type of <a href="qtquick-modelviewsdata-modelview.html#qml-data-models">Data Model</a>.</p>
<p>A delegate should specify its size using <a href="qml-qtquick-item.html#implicitWidth-prop">implicitWidth</a> and <a href="qml-qtquick-item.html#implicitHeight-prop">implicitHeight</a>. The <a href="qml-qtquick-tableview.html">TableView</a> lays out the items based on that information. Explicit width or height settings are ignored and overwritten.</p>
<p><b>Note: </b>Delegates are instantiated as needed and may be destroyed at any time. They are also reused if the <a href="qml-qtquick-tableview.html#reuseItems-prop">reuseItems</a> property is set to <code>true</code>. You should therefore avoid storing state information in the delegates.</p><p><b>See also </b><a href="qml-qtquick-tableview.html#row-heights-and-column-widths">Row heights and column widths</a> and <a href="qml-qtquick-tableview.html#reusing-items">Reusing items</a>.</p>
</div></div><!-- @@@delegate -->
<br/>
<!-- $$$model -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="model-prop">
<td class="tblQmlPropNode"><p>
<a name="model-prop"></a><span class="name">model</span> : <span class="type">model</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the model that provides data for the table.</p>
<p>The model provides the set of data that is used to create the items in the view. Models can be created directly in QML using <a href="../qtqml/qml-qtqml-models-listmodel.html">ListModel</a>, <a href="../qtxmlpatterns/qml-qtquick-xmllistmodel-xmllistmodel.html">XmlListModel</a> or <a href="qtquick-views-example.html#objectmodel">ObjectModel</a>, or provided by a custom C++ model class. If it is a C++ model, it must be a subclass of <a href="../qtcore/qabstractitemmodel.html">QAbstractItemModel</a> or a simple list.</p>
<p><b>请参考 </b><a href="qtquick-modelviewsdata-modelview.html#qml-data-models">Data Models</a>。</p>
</div></div><!-- @@@model -->
<br/>
<!-- $$$reuseItems -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="reuseItems-prop">
<td class="tblQmlPropNode"><p>
<a name="reuseItems-prop"></a><span class="name">reuseItems</span> : <span class="type"><a href="../qtqml/qml-bool.html">bool</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds whether or not items instantiated from the <a href="qml-qtquick-tableview.html#delegate-prop">delegate</a> should be reused. If set to <code>false</code>, any currently pooled items are destroyed.</p>
<p><b>请参考</b> <a href="qml-qtquick-tableview.html#reusing-items">Reusing items</a>，<a href="qml-qtquick-tableview.html#pooled-signal">TableView::pooled</a> 和 <a href="qml-qtquick-tableview.html#reused-signal">TableView::reused</a>。</p>
</div></div><!-- @@@reuseItems -->
<br/>
<!-- $$$rowHeightProvider -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="rowHeightProvider-prop">
<td class="tblQmlPropNode"><p>
<a name="rowHeightProvider-prop"></a><span class="name">rowHeightProvider</span> : <span class="type"><a href="../qtqml/qml-var.html">var</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property can hold a function that returns the row height for each row in the model. When assigned, it will be called whenever <a href="qml-qtquick-tableview.html">TableView</a> needs to know the height of a specific row. The function takes one argument, <code>row</code>, for which the <a href="qml-qtquick-tableview.html">TableView</a> needs to know the height.</p>
<p><b>Note: </b>The height of a row must always be greater than <code>0</code>.</p><p><b>See also </b><a href="qml-qtquick-tableview.html#columnWidthProvider-prop">columnWidthProvider</a> and <a href="qml-qtquick-tableview.html#row-heights-and-column-widths">Row heights and column widths</a>.</p>
</div></div><!-- @@@rowHeightProvider -->
<br/>
<!-- $$$rowSpacing -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="rowSpacing-prop">
<td class="tblQmlPropNode"><p>
<a name="rowSpacing-prop"></a><span class="name">rowSpacing</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the spacing between the rows.</p>
<p>The default value is 0.</p>
</div></div><!-- @@@rowSpacing -->
<br/>
<!-- $$$rows -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="rows-prop">
<td class="tblQmlPropNode"><p>
<a name="rows-prop"></a><span class="name">rows</span> : <span class="type"><a href="../qtqml/qml-int.html">int</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the number of rows in the table. This is equal to the number of rows in the model.</p>
<p>This property is read only.</p>
</div></div><!-- @@@rows -->
<br/>
<h2>Attached Property Documentation</h2>
<!-- $$$view -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="view-attached-prop">
<td class="tblQmlPropNode"><p>
<a name="view-attached-prop"></a><span class="name">TableView.view</span> : <span class="type"><a href="qml-qtquick-tableview.html">TableView</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This attached property holds the view that manages the delegate instance. It is attached to each instance of the delegate.</p>
</div></div><!-- @@@view -->
<br/>
<h2>Attached Signal Documentation</h2>
<!-- $$$pooled -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="pooled-signal">
<td class="tblQmlFuncNode"><p>
<a name="pooled-signal"></a><span class="name">pooled</span>()</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted after an item has been added to the reuse pool. You can use it to pause ongoing timers or animations inside the item, or free up resources that cannot be reused.</p>
<p>This signal is emitted only if the <a href="qml-qtquick-tableview.html#reuseItems-prop">reuseItems</a> property is <code>true</code>.</p>
<p><b>请参考</b> <a href="qml-qtquick-tableview.html#reusing-items">Reusing items</a>，<a href="qml-qtquick-tableview.html#reuseItems-prop">reuseItems</a> 和 <a href="qml-qtquick-tableview.html#reused-signal">reused</a>。</p>
</div></div><!-- @@@pooled -->
<br/>
<!-- $$$reused -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="reused-signal">
<td class="tblQmlFuncNode"><p>
<a name="reused-signal"></a><span class="name">reused</span>()</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted after an item has been reused. At this point, the item has been taken out of the pool and placed inside the content view, and the model properties such as index, row, and column have been updated.</p>
<p>Other properties that are not provided by the model does not change when an item is reused. You should avoid storing any state inside a delegate, but if you do, manually reset that state on receiving this signal.</p>
<p>This signal is emitted when the item is reused, and not the first time the item is created.</p>
<p>This signal is emitted only if the <a href="qml-qtquick-tableview.html#reuseItems-prop">reuseItems</a> property is <code>true</code>.</p>
<p><b>请参考</b> <a href="qml-qtquick-tableview.html#reusing-items">Reusing items</a>，<a href="qml-qtquick-tableview.html#reuseItems-prop">reuseItems</a> 和 <a href="qml-qtquick-tableview.html#pooled-signal">pooled</a>。</p>
</div></div><!-- @@@reused -->
<br/>
<h2>Method Documentation</h2>
<!-- $$$forceLayout -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="forceLayout-method">
<td class="tblQmlFuncNode"><p>
<a name="forceLayout-method"></a><span class="name">forceLayout</span>()</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>Responding to changes in the model are batched so that they are handled only once per frame. This means the <a href="qml-qtquick-tableview.html">TableView</a> delays showing any changes while a script is being run. The same is also true when changing properties such as <a href="qml-qtquick-tableview.html#rowSpacing-prop">rowSpacing</a> or <a href="qml-qtquick-item.html#anchors.leftMargin-prop">leftMargin</a>.</p>
<p>This method forces the <a href="qml-qtquick-tableview.html">TableView</a> to immediately update the layout so that any recent changes take effect.</p>
<p>Calling this function re-evaluates the size and position of each visible row and column. This is needed if the functions assigned to <a href="qml-qtquick-tableview.html#rowHeightProvider-prop">rowHeightProvider</a> or <a href="qml-qtquick-tableview.html#columnWidthProvider-prop">columnWidthProvider</a> return different values than what is already assigned.</p>
</div></div><!-- @@@forceLayout -->
<br/>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
